<template>
  <el-card class="box-card" >
  <div slot="header" class="clearfix">
    <!-- 表头 -->
    <el-form  class="box">
     <el-form-item label="学科名称" class="xueke">
      <el-input v-model="Dpname"></el-input>
      <el-button @click="eliminateFn">清除</el-button>
      <el-button type="primary" @click="searchFn">搜索</el-button>
     </el-form-item>
     <!-- 右边新增学科按钮 -->
      <el-form-item  class="suj">
    <el-button  type="success" icon="el-icon-edit" @click="addedFn">新增学科</el-button>
  </el-form-item>
      </el-form>
      <!-- 总数据提示条 -->
      <template>
      <el-alert
      :title="`数据一共${counts}条`"
      type="info"
      show-icon
      :closable="false">
    </el-alert>
        </template>
  </div>
    <div class="text item">
      <template>
        <!-- 表格组件 -->
        <Sefrom  :subjectarr='Subjectlist' @modify='modiFn' @removeFn='removeFn'/>
      </template>
  </div>
  <!-- 新增学科弹框 -->
    <el-dialog
    :title="isEit ? '新增学科' :'修改学科'"
    :visible.sync="dialogVisible"
    width="21%"
     @close='cancelFn'
    >
   <el-form  ref="formName" :rules="rules" :model="ruleForm">
   <el-form-item label="学校名称" prop="subjectName" >
     <div  class="itemyi">
       <el-input class="input" placeholder="请输入学校名称" v-model="ruleForm.subjectName" ></el-input>
 </div>
  </el-form-item>
  </el-form>
  <el-switch
  v-model="ruleForm.isFrontDisplay"
  active-color="#13ce66"
  inactive-color="#ff4949"
  inactive-text="是否显示"
  class="switch"
  >
</el-switch >
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancelFn">取 消</el-button>
    <el-button type="primary" @click="determineFn">确 定</el-button>
  </span>
</el-dialog>
<!-- 分页 -->
<el-pagination
      background
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize"
      layout="prev, pager, next,sizes, jumper"
      :total="counts"
      @size-change='handleSizeChange'
      @current-change="handleCurrentChange"
     >
    </el-pagination>
</el-card>
</template>

<script>
import Sefrom from '@/components/Sefrom'
import { details, addsubjectFn, detailsFn, modifyAPI, removeAPI } from '@/api/subject/subject.js'
export default {
  name: 'Subjects',
  components: {
    Sefrom
  },
  data () {
    return {
      Subjectlist: [], // 学科列表
      dialogVisible: false, // 新增学科弹框是否显示
      Dpname: null, // 学科名称输入值（搜索）
      isEit: true, // 判断是增加还是修改
      counts: 0, // 数据总数
      id: '', // 数据id
      page: 1, // 当前页码
      pages: 0, // 总页数
      pagesize: 10, // 每页显示数量
      ruleForm: {
        subjectName: '', // 新增学科输入值
        isFrontDisplay: true // 是否显示
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 获取学科列表
    this.getcoursedetails()
  },
  methods: {
    // 获取学科列表
    async  getcoursedetails () {
      const res = await details(
        {
          subjectName: this.Dpname,
          page: this.page,
          pagesize: this.pagesize
        }
      )
      const { counts, items, page, pages, pagesize } = res.data
      // 数据总数
      this.counts = counts
      // 新增学科弹框是否显示
      this.Subjectlist = items
      // 当前页码
      this.page = Number(page)
      // 总页数
      this.pages = pages
      // 每页显示数量
      this.pagesize = Number(pagesize)
      // this.id = id

      const id = this.Subjectlist.map(item => item.id)
      // const ids = id.forEach(item => {
      //   let a = ''
      //   a = item
      // })

      this.$store.commit('subjects/getSubjeclist', res.data)
      this.$store.commit('subjects/getsubjectID', id)

      // console.log(id)
    },

    // 点击新增学科
    addedFn () {
      this.isEit = true
      this.dialogVisible = true
      this.ruleForm.isFrontDisplay = true
    },
    // 点击确定
    determineFn () {
      this.$refs.formName.validate(async (valid) => {
        if (!valid) return
        this.isEit ? this.addtoFn() : await this.modifyAPIFn()

        
        await this.getcoursedetails()
        this.$message.success('操作成功')
        // 重新获取学科列表
        // 重置表单
        this.$refs.formName.resetFields()
        this.dialogVisible = false
      })
    },
    // 添加数据接口
    async  addtoFn () {
      const isFR = this.ruleForm.isFrontDisplay ? 1 : 0
      //  添加数据
      await addsubjectFn({
        subjectName: this.ruleForm.subjectName,
        isFrontDisplay: isFR
      })
      this.getcoursedetails()
    },
    // 点击取消
    cancelFn () {
      // 关闭弹框
      this.dialogVisible = false
      // 重置表单
      this.$refs.formName.resetFields()
    },
    // 点击搜索
    async searchFn () {
      // 调用获取学科列表
      this.getcoursedetails()
    },
    // 点击清除
    eliminateFn () {
      this.Dpname = ''
    },
    // 点击 修改按钮
    async modiFn (fa, id) {
      this.id = id
      this.isEit = false
      // 重置显示标签
      this.ruleForm.isFrontDisplay = true
      // 开启弹框
      this.dialogVisible = true
      // 数据回填
      const res = await detailsFn(id)
      this.ruleForm.subjectName = res.data.subjectName
    },
    // 修改数据接口
    async modifyAPIFn () {
      const isFR = this.ruleForm.isFrontDisplay ? 1 : 0
      console.log(this.id)
      console.log(this.ruleForm.subjectName)
      const res = await modifyAPI({
        id: this.id,
        subjectName: this.ruleForm.subjectName,
        isFrontDisplay: isFR
      })
      // this.getcoursedetails()
      console.log(res)
    },
    // 点击删除
    removeFn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeAPI(id)
        await this.getcoursedetails()
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        console.log(this.Subjectlist)
        if (this.Subjectlist.length === 0) {
          this.page--
          this.getcoursedetails()
          if (this.page <= 0) {
            this.page = 1
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 每页条数
    handleSizeChange (val) {
      // console.log(val)
      this.pagesize = val
      console.log(this.pagesize)
      this.getcoursedetails()
      // console.log(this.pages)
    },
    // 当前页数
    handleCurrentChange (val) {
      this.page = val
      this.getcoursedetails()
      // console.log(this.pages)
    }
  }
}
</script>

<style scoped>
.xueke{
  width: 500px;
}
.itemyi{
  width: 400px;
  margin-right: 10px;
}
.input{
  width: 280px;
}
.switch{
 margin-left: 18px;
}
</style>
<style scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
 

  .clearfix:before,
  .clearfix:after {
    display: flex;
    justify-content: space-between;
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .el-card__header{

    border-bottom:0;
  }
  .el-input{
    width: 200px;
    margin: 0 10px;
  }
  .el-input--medium .el-input__inner{
    height: 34px;
  }

  .el-button--medium{
    font-size: 12px;
    border-radius:4px
  }
  .el-form{
    display: flex;
    justify-content: space-between;
  }
  .el-form-item__content{
    margin: 0 70px;
  }
  /* .el-input--medium .el-input__inner {
    width: 300px;
    height: 36px;
} */
.input{
  width: 280px;
  height: 30px;
  margin-left: 8px;
}
.dialog-footer{
  margin-left: 214px;

}
.el-form-item__label{
  padding: 0;
  margin-left: 0;
}
/* .el-switch{
height: 40px;
margin-left: 20px;
} */
.el-form-item--medium{
margin-left: 0px;
}
.suj{
  margin-bottom: 5px;
}
 .box-card /deep/ .el-card__header{
  border-bottom: 0;
  padding: 18px 20px 0 20px;
}
.el-pagination{
  padding-left: 1250px;
}
/* .el-input__inner{
  width: 270px;
} */
  </style>
